<template>
    <div>
        <div>
            <div>
                <el-input
                        size="small"
                        style="width: 300px"
                        placeholder="添加职称..."
                        prefix-icon="el-icon-plus"
                        v-model="jl.name">
                </el-input>
                <el-select v-model="jl.titleLevel" placeholder="职称等级"
                           size="small" style="margin-left: 6px;margin-right: 6px">
                    <el-option
                            v-for="item in titleLevels"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
                <el-button icon="el-icon-plus" size="small" type="primary" @click="addJobLevels">添加</el-button>
            </div>

            <div class="posManaMain">
                <el-table
                        :data="jls"
                        border
                        stripe
                        size="small"
                        style="width: 70%" @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="职称名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="titleLevel"
                            label="职称等级"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="createDate"
                            label="创建时间">
                    </el-table-column>

                    <el-table-column
                            prop="enabled"
                            label="启用状态">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.enabled" type="success">已启用</el-tag>
                            <el-tag v-else type="danger">未启用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="showEditView(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="danger" size="small" style="margin-top: 10px"
                           :disabled="multipleSelections.length==0"
                           @click="deleteMany">批量删除
                </el-button>

            </div>
        </div>



    </div>
</template>

<script>
    export default {
        name: "JoblevelMana",
        data(){
            return{
                jl:{
                    name:'',
                    titleLevel:''
                },
                jls:[],
                multipleSelections:[],
                titleLevels:[
                    '正高级',
                    '副高级',
                    '中级',
                    '初级',
                    '员级'
                ]
            }
        },
        mounted() {
            this.initJobLevels();
        },
        methods:{
            //添加 职称信息
            addJobLevels(){
                //判断是否有输入和选择值
                if(this.jl.name&&this.jl.titleLevel){
                    this.postRequest('/system/basic/joblevel/',this.jl).then(resp=>{
                        if(resp){
                            //刷新数据
                            this.initJobLevels();
                        }
                    })
                }
            },
            initJobLevels(){
                //发起请求 初始化数据
                this.getRequest('/system/basic/joblevel/').then(resp=>{
                    if(resp){
                        this.jls=resp;
                    }
                })
            },
            handleSelectionChange(val){
                this.multipleSelections=val;
            },
            showEditView(index,data){

            },

            handleDelete(index,data){

                this.$confirm('此操作将永久【'+data.name+'】该职称, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //掉后端 删除职位的api接口
                    this.deleteRequest('/system/basic/joblevel/'+data.id)
                        .then(resp=>{
                            if(resp){
                                //刷新一下 表格数据
                               this.initJobLevels();
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            deleteMany(){

            }
        }
    }
</script>

<style scoped>

</style>
